<html>
	<head>
		<link href="css/reset.css" rel="stylesheet" />
		<link href="css/pepper-grinder/jquery-ui-1.7.2.custom.css" rel="stylesheet" />	
		<link href="css/sagabuilder.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
		<script type="text/javascript" src="js/ext-core-debug.js"></script>
		<!--
		<script type="text/javascript" src="js/sagabuilder.js"></script>
		-->
		<style type="text/css">
			.panel {
				height: 100%;
				width: 100%;
				position: relative;
			}
			.bgd, .fgd {
				position: absolute;
				top: 0px;
				left: 0px;
				height: 100%;
				width: 100%;
				z-index: 100;
				overflow: hidden;
			}
			
			.fgd {
				z-index: 200;
			}
			.mask {
				position: absolute;
				height: 100px;
				width: 100%;
				background-color: #000000;
				opacity: 0;
				left: 0px;
				
			}
			#topmask {
				top: -100px;
			}
			#bottommask {
				bottom: -100px
			}
			
			#topmask.show {
				top:0px;
				opacity: 1;
			}
			
			#bottommask.show {
				bottom: 0px;
				opacity: 1;
			}

			.chat {
				position: absolute;
				width: 100%;
				height: 200px;
				bottom: 0px;
			}
			
			.chat p {
				margin: 8px 16px;
			}
			.blackbox {
				background-color: #000;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				opacity: .5;
			}
			#chatbox {
				bottom: -200px;
			}
			#chatbox.show {
				bottom: 0px;	
			}
			
			#chatbox p {
				font-family: Arial Black, Arial Black, Gadget, sans-serif;
				xfont-weight:bold;
				color: #FFF;
				text-shadow: 2px 2px 0px black;
				xtext-transform:uppercase;
				position: relative;
				z-index: 100;
				
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				console.log("hi")
				$("#topmask").toggleClass("show",1000, function(){
					$("#chatbox").toggleClass("show",500);
				});
				$("#bottommask").toggleClass("show",1000);
			})
			
		</script>
		<title>Chatting</title>
	</head>
	<body>
		<div class="panel">
			<div class="bgd">
				<img src="img/wof009.png" height="100%" width="100%"/>
			</div>
			<div class="fgd">
				<div id="topmask" class="mask"></div>
				<div id="bottommask" class="mask"></div>
				<div id="chatbox" class="chat">
					<div class='blackbox'></div>
					<p>This is a test of the national broadcasting system.</p>
				</div>
			</div>
			
		</div>
		
	</body>
</html>